<template>
  <div class="ps_w_h_100 chart-grid">
    <ps-borderbox3
      v-for="(item, index) in list"
      :key="index"
      :show-shadow="false"
      :background-color="item.bgc"
      class="ps_w_h_100 chart-grid-item"
      hideAngle
    >
      <div class="icon">
        <el-icon size="30" :color="item.iconColor">
          <component :is="item.icon" />
        </el-icon>
      </div>

      <div class="text">
        <div class="title">
          {{ props.mode === 0 ? item.OrderName : item.Udef1 }}
        </div>

        <div class="cts">
          <span class="ctl">本月(万)</span>
          <span class="ctl">今日(万)</span>
          <span class="ct">{{ item.M ? formatMoney(null, item.M) : "" }}</span>
          <span class="ct">{{ item.D ? formatMoney(null, item.D) : "" }}</span>
        </div>
      </div>
    </ps-borderbox3>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import {
  getTodayProcessBaogongV2,
  getTodayProcessBaogong1,
} from "@/api/visual/index.js";
import { formatMoney } from "@/utils/globalMethod";
const data = ref([]);

const props = defineProps({
  mode: {
    // 0 为测试 1为正式
    type: Number,
    default: 1,
  },
});

const bgc = ref([
  "#002840",
  "#3a1443",
  "#0d2263",
  "#2e4e7e",
  "#5d513c",
  "#574266",
  "#2F4F4F",
  "#808080",
  "#5F9EA0",
]);
const icon = ref([
  "Discount",
  "UploadFilled",
  "Promotion",
  "Connection",
  "Position",
  "Flag",
  "Briefcase",
  "Stamp",
  "Wallet",
]);

const iconColor = ref([
  "#1fb673",
  "#f24f7d",
  "#4f8af7",
  "#1d69db",
  "#c59138",
  "#972de2",
  "#0066CC",
  "#66CCCC",
  "#9999CC",
]);

const list = computed(() => {
  const newData = data.value.map((item, index) => {
    item.bgc = bgc.value[index];
    item.icon = icon.value[index];
    item.iconColor = iconColor.value[index];
    return item;
  });

  return newData;
});

onMounted(() => {
  if (props.mode === 0) {
    getTodayProcessBaogong1().then((response) => {
      data.value = response.data;
    });
  } else {
    getTodayProcessBaogongV2().then((response) => {
      data.value = response.data;
    });
  }
});
</script>

<style scoped lang="scss">
$gap: 5px;

.chart-grid {
  display: grid;
  height: 100%;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);

  grid-column-gap: $gap;
  grid-row-gap: $gap;

  .chart-grid-item {
    display: flex;
    align-items: center;
    // justify-content: center;
    // justify-content: space-evenly;

    .text {
      margin-left: 10px;
      .cts {
        width: 200px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-column-gap: 18%;
      }
      .ct {
        // color: #06fd9a;
        color: #33cc66;
        font-size: 20px;
        font-weight: bold;
      }

      .ctl {
        // color: rgba(255, 255, 255, 0.6);
        color: #99cc99;
        margin-bottom: 4px;
        font-size: 12px;
      }

      .title {
        font-size: 16px;
        // font-weight: bold;

        color: #f9fac8;
        margin-bottom: 8px;
      }
    }
  }
}
</style>
